<template>
  <div class="Banner">
    <div class="row p-0 position-relative">
      <div class="card border-0 w-100" @click="ShowSwiper">
        <img class="card-img-top" :src="$route.params.src" alt="Card image cap">
      </div>
      <div class="banner-info">{{$route.params.title}}</div>
      <div class="banner-num">
        <span class="iconfont">&#xe658;</span> 12
      </div>
    </div>
    <fade>
      <gallery :imgs="imgs" v-show="isShowSwiper" @changeShow="hideSwiper"></gallery>
    </fade>
  </div>
</template>

<script>
import Gallery from "@/components/detail/Gallery";
import Fade from "@/components/common/Fade";
export default {
  name: "Banner",
  props: {},
  data() {
    return {
      isShowSwiper: false,
      imgs: [
        "http://img2.imgtn.bdimg.com/it/u=2286176344,3505049792&fm=11&gp=0.jpg",
        "http://img5.imgtn.bdimg.com/it/u=4002611539,678525530&fm=26&gp=0.jpg",
        "http://img3.imgtn.bdimg.com/it/u=3982894987,3745153908&fm=26&gp=0.jpg",
        "http://img0.imgtn.bdimg.com/it/u=1953213770,1199145964&fm=26&gp=0.jpg",
        "http://img0.imgtn.bdimg.com/it/u=2304820178,3689034032&fm=26&gp=0.jpg"
      ]
    };
  },
  methods: {
    ShowSwiper() {
      this.isShowSwiper = true;
    },
    hideSwiper() {
      this.isShowSwiper = false;
    }
  },
  components: {
    Gallery,
    Fade
  },
  mounted() {},
  computed: {}
};
</script>


<style scoped>
.banner-info {
  position: absolute;
  left: 0.5rem;
  bottom: 0.5rem;
  color: #fff;
}
.banner-num {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  color: #fff;
}
</style>
